<template>
  <div class="AnswerWholeBox">
    <div class="AnswerHeader">
      <div class="AnswerMainHeader">
        <div class="AnswererPicName">
          <div class="AnswererPicBox">
            <el-avatar
              class="AnswererPic"
              :src="
                avatarError
                  ? '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default?t=' +
                    Math.random()
                  : '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' +
                    this.answer.user_id +
                    '?t=' +
                    Math.random()
              "
              @error="this.avatarError = !this.avatarError"
            />
          </div>
          <div class="AnswererInfo">
            <el-text class="AnswererName">{{
              this.answer.user_name +
              (this.answer.user_id == this.user.id ? "(我)" : "")
            }}</el-text>
            <el-text class="AnswererJob">{{ this.answer.user_job }}</el-text>
          </div>
        </div>
        <div class="AttentionAnswererBtnBox">
          <el-button
            :type="this.answer.is_follow ? 'info' : 'primary'"
            plain
            :icon="Plus"
            class="AttentionAnswererBtn"
            @click="AttentionAnswerer"
            >{{ this.answer.is_follow ? "已关注" : "关注" }}</el-button
          >
          <el-button :type="'danger'" plain @click="DeleteAnswer" v-show="this.answer.user_id==this.user.user_id"
            >删除</el-button
          >
        </div>
      </div>
      <div class="LikeAnswerNumberBox">
        <el-text class="LikeAnswerNumber">{{
          this.answer.liked_count + " 人赞同了该回答"
        }}</el-text>
      </div>
    </div>
    <el-divider class="AnswerDivider" />
    <v-md-preview :text="this.answer.answer_content" />
    <div class="AnswerFooter">
      <el-button
        :type="this.answer.is_like ? 'info' : 'primary'"
        plain
        :icon="StarFilled"
        class="ApproveAnswerBtn"
        @click="LikeAnswer"
        >{{
          this.answer.is_like
            ? "已赞同 " + this.answer.liked_count
            : "赞同 " + this.answer.liked_count
        }}</el-button
      >
      <el-button
        :type="this.answer.is_collected ? 'info' : 'primary'"
        plain
        :icon="StarFilled"
        class="ApproveAnswerBtn"
        @click="CollectAnswer"
        >{{ this.answer.is_collected ? "已收藏" : "收藏" }}</el-button
      >
      <el-text class="CheckAnswerCommentBtn" @click="ShowAnswerComments">
        <el-icon><ChatLineSquare /></el-icon>
        {{ "评论 " + this.answer.comment_count }}
      </el-text>
    </div>
    <el-divider class="ACdivider" />
    <div class="AnswerReplyBox" v-show="ShowComment">
      <div class="CommentAnswerBox">
        <el-input
          v-model="AnswerReply"
          type="textarea"
          :rows="3"
          resize="none"
          placeholder="想要说什么"
        />
        <el-button plain class="ACSubmitReply" @click="SubmitReply"
          >提交</el-button
        >
      </div>
      <div class="AComments">
        <Comment
          v-for="(comment, index) in AComments"
          :comment="comment"
          :index="index"
          :first="true"
          :type="1"
          @LikeComment="LikeComment"
          @cancel_LikeComment="cancel_LikeComment"
          @delComment="delComment"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Plus, StarFilled } from "@element-plus/icons-vue";
import Comment from "@/components/common/Comment.vue";
export default {
  name: "Answer",
  props: ["answer", "user", "index"],
  setup() {
    return {
      Plus,
      StarFilled,
    };
  },
  components: {
    Comment,
  },
  data() {
    return {
      liked: false,
      ShowComment: false,
      AComments: [],
      AnswerReply: "",
      avatarError: false,
    };
  },
  mounted() {
    console.log(this.answer)
  },
  methods: {
    AttentionAnswerer() {
      if (!this.answer.is_follow) {
        this.$axios
          .post(
            `${this.$target}/follow?from_id=` +
              this.user.id +
              `&to_id=` +
              this.answer.user_id +
              `&type=0`
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("关注成功!");
              this.$emit("attentionAnswerer", this.index);
            } else {
              this.notifyError("关注失败!");
            }
          });
      } else {
        this.$axios
          .delete(
            `${this.$target}/follow?from_id=` +
              this.user.id +
              `&to_id=` +
              this.answer.user_id +
              `&type=0`
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("取关成功!");
              this.$emit("cancel_attentionAnswerer", this.index);
            } else {
              this.notifyError("取关失败!");
            }
          });
      }
    },
    LikeAnswer() {
      if (!this.answer.is_like) {
        this.$axios
          .patch(
            `${this.$target}/answer/like?user_id=` +
              this.user.id +
              `&answer_id=` +
              this.answer.answer_id
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("点赞成功!");
              this.$emit("likeAnswer", this.index);
            } else {
              this.notifyError("点赞失败!");
            }
          });
      } else {
        this.$axios
          .delete(
            `${this.$target}/answer/like?user_id=` +
              this.user.id +
              `&answer_id=` +
              this.answer.answer_id
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("取消点赞成功!");
              this.$emit("cancel_likeAnswer", this.index);
            } else {
              this.notifyError("取消点赞失败!");
            }
          });
      }
    },
    CollectAnswer() {
      if (!this.answer.is_collected) {
        this.$axios
          .post(
            `${this.$target}/collection?user_id=` +
              this.user.id +
              `&answer_id=` +
              this.answer.answer_id
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("收藏成功!");
              this.$emit("collectAnswer",this.index);
            } else {
              this.notifyError("收藏失败!");
            }
          });
      } else {
        console.log(this.user.id,this.answer.answer_id)
        this.$axios
          .delete(
            `${this.$target}/collection?user_id=` +
              this.user.id +
              `&answer_id=` +
              this.answer.answer_id
          )
          .then((res) => {
            if (res.data.data) {
              this.notifySucceed("取消收藏成功!");
              this.$emit("collectAnswer",this.index);
            } else {
              this.notifyError("取消收藏失败!");
            }
          });
      }
    },
    ShowAnswerComments() {
      this.ShowComment = !this.ShowComment;
      this.$axios
        .get(
          `${this.$target}/comment/default?to_id=` +
            this.answer.answer_id +
            `&from_id=` +
            this.user.id +
            `&type=1`
        )
        .then((res) => {
          this.AComments = res.data.data;
        });
    },
    SubmitReply() {
      if (this.AnswerReply.length === 0) {
        this.notifyError("你还没有输入任何内容!");
      } else {
        let param = {
          comment_content: this.AnswerReply,
          to_id: this.answer.answer_id,
          user_id: this.user.id,
          type: 1,
        };
        this.$axios
          .post(`${this.$target}/comment`, JSON.stringify(param), {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
            },
          })
          .then((res) => {
            if (res.data.status === 0) {
              this.AComments.push(res.data.data);
              this.notifySucceed("发表评论成功!");
              this.AnswerReply = "";
            } else {
              this.notifyError("发表评论失败!");
            }
          });
      }
    },
    LikeComment(index) {
      this.AComments[index].liked = true;
      this.AComments[index].liked_count++;
    },
    cancel_LikeComment(index) {
      this.AComments[index].liked = false;
      this.AComments[index].liked_count--;
    },
    delComment() {
      this.AComments.splice(this.index, 1);
    },
    DeleteAnswer() {
      this.$axios
        .delete(`${this.$target}/answer?answer_id=` + this.answer.answer_id)
        .then((res) => {
          if (res.data.data) {
            this.$emit("delAnswer", this.index);
            this.notifySucceed("删除成功!");
          } else {
            this.notifyError("删除失败!");
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.AnswerWholeBox {
  width: 100%;
  padding-bottom: 20px;
  margin: 0 auto 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px, rgba(0, 0, 0, 0.3) 0px -1px 3px -1px;
  .AnswerReplyBox {
    width: 100%;
    max-height: 560px;
    .AComments {
      width: 90%;
      max-height: 465px;
      margin: 0 auto;
      overflow: scroll;
    }
    .CommentAnswerBox {
      text-align: right;
      height: 90px;
      margin-bottom: 5px;
      .ACSubmitReply {
        position: relative;
        margin-right: 15px;
        margin-top: -60px;
      }
    }
  }
  .ACdivider {
    width: 90%;
    margin-bottom: 0px;
  }
  .AnswerHeader {
    width: 90%;
    height: fit-content;
    .AnswerMainHeader {
      width: 100%;
      height: fit-content;
      display: flex;
      justify-content: space-between;
      .AnswererPicName {
        display: flex;
        justify-content: space-between;
        width: fit-content;
        height: 60px;
        margin-top: 10px;
        .AnswererPicBox {
          width: 52px;
          height: 52px;
          margin-top: 4px;
          margin-left: 20px;
          display: inline-block;
          .AnswererPic {
            width: 100%;
            height: 100%;
          }
        }
        .AnswererInfo {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .AnswererName {
            font-size: 20px;
            font-weight: bold;
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
          }
          .AnswererJob {
            font-size: 14px;
            font-weight: 14;
          }
        }
      }
      .AttentionAnswererBtnBox {
        margin-top: 40px;
      }
    }
    .LikeAnswerNumberBox {
      margin-top: 10px;
      text-align: left;
      padding-left: 20px;
      .LikeAnswerNumber {
        font-size: 14px;
        font-weight: 12;
        color: #bac4da;
      }
    }
  }
  .AnswerDivider {
    margin-top: 10px;
    width: 100%;
  }
  .AnswerContext {
    width: 92%;
    height: auto;
    max-height: 400px;
    margin: 5px auto 0;
    overflow: scroll;
  }
  .AnswerFooter {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 15px;
    .CheckAnswerCommentBtn {
      font-size: 16px;
      margin-left: 20px;
      cursor: pointer;
    }
    .CheckAnswerCommentBtn:hover {
      color: dodgerblue;
    }
  }
}
</style>
